<template>
  <div class="container">
    <el-row>
      <el-col :span="18" class="topTitle">
        申报项目：光谷金融港b1地块
        <el-tag type="success">已通过</el-tag>
        <el-tag type="info">已驳回</el-tag>
        <el-tag type="warning">已取消</el-tag>
      </el-col>
      <el-col :span="6" class="topTitle">
        <el-button plain>取消申报</el-button>
        <el-button plain>返回列表</el-button>
      </el-col>
    </el-row>
    <div class="mainCon">
      <el-form ref="projectArchiveForm" label-width="140px">
        <el-row>
          <el-col :span="24">
            <div class="blockquote">项目基本信息</div>
          </el-col>
        </el-row>
        <el-row class="detailInfo">
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-row class="detailInfoItem">
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="项目名称" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="施工许可证" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="项目状态" prop="name">
                    <el-input></el-input> </el-form-item
                ></el-col>
              </el-row>
              <el-row class="detailInfoItem">
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="所属区域" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="所属行业" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="投资类别" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="detailInfoItem">
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="工程造价" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="开工日期" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="建设周期" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="detailInfoItem">
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="详细地址" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="工程类型" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth"> </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="blockquote">建设方信息</div>
          </el-col>
        </el-row>
        <el-row class="detailInfo">
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-row class="detailInfoItem">
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="单位名称" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="统一社会信用代码" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth"> </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="blockquote">施工方信息</div>
          </el-col>
        </el-row>
        <el-row class="detailInfo">
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-row class="detailInfoItem">
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="单位名称" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="统一社会信用代码" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth"> </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="blockquote">项目经理信息</div>
          </el-col>
        </el-row>
        <el-row class="detailInfo">
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-row class="detailInfoItem">
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="项目经理姓名" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="项目经理身份证号" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="项目经理手机号" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="detailInfoItem">
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="执业证书" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth">
                  <el-form-item label="证书编号" prop="name">
                    <el-input></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" class="labelWidth"> </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 40px">
          <el-col :span="12" style="text-align: right">
            <el-button type="primary" style="width: 150px">通过申报</el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="danger" style="width: 150px">驳回申报</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'projectArchive',
}
</script>

<style scoped>
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font: bold 18px/67px Microsoft YaHei;
}

.mainCon {
  padding-left: 24px;
  padding-right: 24px;
  height: calc(100% - 67px);
  overflow-y: auto;
}

.blockquote {
  color: #333;
  font: bold 16px Microsoft YaHei;
  border-bottom: 1px solid #dee5f4;
  height: 35px;
  margin-top: 40px;
}

.blockquote:before {
  background-color: #009588;
  content: '';
  padding: 2px;
  margin-right: 10px;
}

.labelWidth {
  font-size: 14px;
  color: #666666;
  display: inline-block;
  height: 36px;
  text-align: right;
}

.information {
  font-size: 14px;
  color: #151515;
}

.detailInfo {
  padding: 18px 0 5px 0;
}

.detailInfoItem {
  margin-top: 28px;
}
</style>
